<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*这里的大小是根据高宽上限128像素图片设置的*/
        .img-box{display:table-cell; width:500px; height:1em; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle;}
        .img-box img{vertical-align:middle;}
        input[type='text']:invalid~input[type='submit'] {
            display: none;
            /*border: 2px solid red;*/
        }
        input[type='email']:invalid{
            border: 2px solid red;
        }
        input[type='email']:valid{
            color: #00b390;
        }
        input[type='url']:invalid{
            border: 2px solid burlywood;
        }
    </style>
</head>
<body>
    <div class="img-box">
        <img src="img/consume.png" alt="">
        <img src="img/courseInfo-address-icon.png" alt="">
        <img src="img/big-blank-start.png" alt="">
        <img src="img/smileyFace.png" alt="">
    </div>

    <div>
        <input type="text" name="tel" placeholder="输入电话号码" pattern="^1[3456789]\d{9}$" required><br>
        <input type="text" name="smscode" placeholder="输入验证码" pattern="\d{4}" required><br>
        <input type ="submit">
    </div>
    <div>
        <input type="email" placeholder="请输入邮箱地址"><br>
        <input type="url" placeholder="请输入网站URL"><br>
    </div>

</body>
</html>